<script setup>
import { onMounted, ref } from "vue";
import axios from "@/axios";
import { ElMessage, ElMessageBox } from "element-plus";

const searchForm = ref({
  patientName: '',
  doctorName: '',
});

const appointmentList = ref([]);
const dialogVisible = ref(false);
const dialogTitle = ref('新增预约');
const formData = ref({
  patientName: '',
  doctorName: '',
  time: '',
  expenses: null,
  status: '1'
});

// 重置搜索表单
const resetSearch = () => {
  searchForm.value = {
    patientName: '',
    doctorName: '',
  };
  getAppointmentList();
};

// 获取预约列表
const getAppointmentList = () => {
  axios.get("/admin/appointment/list", { params: searchForm.value }).then((response) => {
    if (response.data.code === 2000) {
      appointmentList.value = response.data.data;
    } else {
      ElMessage.error(response.data.message);
    }
  }).catch(error => {
    ElMessage.error('获取预约列表失败：' + error.message);
  });
};

// 打开新增对话框
const openAddDialog = () => {
  dialogTitle.value = '新增预约';
  formData.value = {
    id: null,
    patientName: '',
    doctorName: '',
    time: '',
    expenses: null,
    status: '1'
  };
  dialogVisible.value = true;
};

// 打开编辑对话框
const openEditDialog = (row) => {
  dialogTitle.value = '编辑预约';
  formData.value = {
    id: row.id,
    patientName: row.patientName,
    doctorName: row.doctorName,
    time: row.time,
    expenses: row.expenses,
    status: row.status
  };
  dialogVisible.value = true;
};

// 提交表单
const submitForm = () => {
  // 数据验证
  if (!formData.value.patientName || !formData.value.doctorName || !formData.value.time) {
    ElMessage.warning('请填写完整信息');
    return;
  }

  // 处理提交的数据
  const submitData = {
    ...formData.value,
    expenses: formData.value.expenses ? Number(formData.value.expenses) : 0
  };

  const url = dialogTitle.value === '新增预约' ? '/admin/appointment/add' : '/admin/appointment/update';
  
  axios.post(url, submitData).then((response) => {
    if (response.data.code === 2000) {
      ElMessage.success(dialogTitle.value + '成功');
      dialogVisible.value = false;
      getAppointmentList();
    } else {
      ElMessage.error(response.data.message);
    }
  }).catch(error => {
    ElMessage.error('操作失败：' + error.message);
  });
};

// 删除预约
const deleteAppointment = (id) => {
  ElMessageBox.confirm('确定要删除该预约记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    axios.post(`/admin/appointment/del/${id}`).then((response) => {
      if (response.data.code === 2000) {
        ElMessage.success('删除成功');
        getAppointmentList();
      } else {
        ElMessage.error(response.data.message);
      }
    }).catch(error => {
      ElMessage.error('删除失败：' + error.message);
    });
  });
};

onMounted(() => {
  getAppointmentList();
});
</script>

<template>
  <div style="background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">预约管理</span>
  </div>

  <!-- 搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true" :model="searchForm">
      <el-form-item label="患者姓名">
        <el-input placeholder="请输入患者姓名" style="width:180px;" v-model="searchForm.patientName"
                  @keydown.enter="getAppointmentList"></el-input>
      </el-form-item>
      <el-form-item label="医生姓名">
        <el-input placeholder="请输入医生姓名" style="width:180px;" v-model="searchForm.doctorName"
                  @keydown.enter="getAppointmentList"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getAppointmentList">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="success" @click="openAddDialog">新增预约</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 预约列表 -->
  <el-card style="margin:20px;">
    <el-table :data="appointmentList" border stripe style="width: 100%">
      <el-table-column prop="patientName" label="患者姓名" width="150"></el-table-column>
      <el-table-column prop="doctorName" label="医生姓名" width="150"></el-table-column>
      <el-table-column prop="time" label="预约时间" width="180"></el-table-column>
      <el-table-column prop="expenses" label="费用" width="120"></el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template #default="scope">
          <el-tag :type="scope.row.status === '1' ? 'success' : 'info'">
            {{ scope.row.status === '1' ? '待完成' : '已完成' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="2000">
        <template #default="scope">
          <el-button type="primary" link @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="danger" link @click="deleteAppointment(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 新增/编辑对话框 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
    <el-form :model="formData" label-width="100px" :rules="rules">
      <el-form-item label="患者姓名" prop="patientName">
        <el-input v-model="formData.patientName" placeholder="请输入患者姓名"></el-input>
      </el-form-item>
      <el-form-item label="医生姓名" prop="doctorName">
        <el-input v-model="formData.doctorName" placeholder="请输入医生姓名"></el-input>
      </el-form-item>
      <el-form-item label="预约时间" prop="time">
        <el-date-picker
          v-model="formData.time"
          type="date"
          placeholder="选择预约日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          style="width: 100%"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="费用" prop="expenses">
        <el-input-number 
          v-model="formData.expenses" 
          :precision="2" 
          :step="0.1" 
          :min="0"
          style="width: 100%"
          placeholder="请输入费用"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="formData.status" style="width: 100%">
          <el-option label="待完成" value="1"></el-option>
          <el-option label="已完成" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-card {
  margin-bottom: 20px;
}

.el-form-item {
  margin-bottom: 18px;
  margin-right: 18px;
}

.el-tag {
  width: 80px;
  text-align: center;
}

.dialog-footer {
  text-align: right;
  display: block;
}
</style>